<!--
 * @Description: 推广模式管理
 * @Author: 秦福凯
 * @Date: 2025-10-29 15:32:39
 * @LastEditTime: 2025-11-21 17:28:06
-->

<template v-loading="tabLaoding">
  <div class="u-search-header" >
    <el-form :model="search">
      <!-- <el-form-item  class="u-f-fl"  label="类型" >
        <u-select @change="getSearch" :data="typeDta" v-model="typrP" style="width: 200px;" ></u-select>
      </el-form-item> -->
      <el-form-item  class="u-f-fl" label-width="28px">
        <u-button type="primary" icon="Search" @click="getSearch">
         搜索
        </u-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="u-search-container">
    <div class="u-h-100">
      <div class="u-btns-box">
        <u-button type="primary" plain icon="Plus" @click="add" :disabled="tabLaoding">新增</u-button>
        <!-- <u-button type="danger" plain icon="Delete" @click="delateD" :disabled="tabLaoding">删除</u-button> -->
      </div>
        <u-table @editBtnsClick="editBtnsClick" v-loading="tabLaoding" :colunm="colunm" :data="TabData"  @selection-change="(data) => TabSelData.splice(0, TabSelData.length, ...data)"></u-table>
        <div class="u-common-pagination">
          <u-page-nation @pagination="paginationE" :total="total" :page="search.param.page"></u-page-nation>
        </div>
    </div>
  </div>

  <!-- 新增 修改 弹窗 -->
  <u-dialog :show="dialogShow" :title='dialogTitle' @close="dialogClose" width="70%"  @submit="submit">
    <u-form  @fileUpload="fileUpload" @changeForm="changeForm" ref="refform" v-loading="formloading" :element="formList" :form="form" >
    </u-form>
   </u-dialog>

   

    

</template>

<script setup>
import { ref, reactive,onMounted} from 'vue'
// 导入接口地址
import busi_servic from '@/api/busiApi'
// 导入公共数据
import { useTecDataStore } from "@/store/teachinginstrument/index.js";
// 导入分页相关混合
import {PageMethod} from '@/components/common/mixin.ts'
import { useRoute,useRouter, } from 'vue-router';

// 公共数据取值
const TecDataStore = useTecDataStore()
const {page,pageSize,pageChane,} = PageMethod()



	const route = useRoute();
	const router = useRouter();

  let activeMenu = ref(0)

  const SearchUrl = ['officalOrderList','videoOrderList','rbookOrderList']
  const addUrl = ['addOfficalOrder','addVideoOrder','addRbookOrder']
  const SelectUrl = ['patternList1','patternList2','patternList3']

  const DeletUrl = ['revokeOfficalOrder','revokeVideoOrder','revokeRbookOrder']


onMounted(() => {

  if(route.path == '/TgmsMan/index-1'){
    activeMenu.value = 0
    colunm = colunm1
    formList = formList1
  }
  if(route.path == '/TgmsMan/index-2'){
    activeMenu.value = 1
    colunm = colunm2
    formList = formList2

  }
  if(route.path == '/TgmsMan/index-3'){
    activeMenu.value = 2
    colunm = colunm3
    formList = formList3

  }
  getSearch()
 
})
const typeDta = [
  {label:'公众号',value:1,content:'公众号',id:1},
  {label:'视频号',value:2,content:'视频号',id:2},
  {label:'小红书',value:3,content:'小红书',id:3},

]
const DdztData = [
  {label:'已下单',value:0,content:'已下单',id:0},
  {label:'进行中',value:1,content:'进行中',id:1},
  {label:'已完成',value:2,content:'已完成',id:2},
  {label:'已撤单',value:3,content:'已撤单',id:3},
]



let typrP = ref(1)
// 新增
function add(){
  form.id = ''
  dialogShow.value = true
  dialogTitle.value = '新增'
  getSelect()
 
}



let dataC = reactive([])

function getSelect(){
  busi_servic[SelectUrl[activeMenu.value]]().then(res =>{
    if(res.data.code == 200){
      dataC = res.data.data
      dataC.map(i => i.label = i.patternStr)
      formList[formList.findIndex(i => i.key == 'patternId')]['data'] = dataC
    }else{
      ElMessage.warning(res.data.msg)
    }
  })
}


// 查询相关变量
let search = reactive({
  ...TecDataStore.comObj,
  param:{
    page:page,
    pageSize:pageSize,
    search:{
    }
  }
})
let tabLaoding = ref(false)
let total = ref(0)
let colunm = reactive([])

let colunm1 = reactive([
  {label:'文章链接地址',key:'arcitleUrl',minWidth:180,ctype:'edit',data:[
    {label:'复制链接',icon:'CopyDocument',link:true},
    {label:'跳转',icon:'Promotion',link:true},
  ]},
  {label:'模式说明',key:'patternStr',minWidth:120},
  {label:'模式单价',key:'patternPrice',minWidth:120},
  {label:'下单数量',key:'orderQuantity',minWidth:120},
  {label:'订单总价(积分)',key:'orderPrice',minWidth:200},
  {label:'订单状态',key:'orderState',minWidth:120,ctype:'dict',dict:DdztData},
  {label:'初始数量',key:'originalQuantity',minWidth:120},
  {label:'完成数量',key:'completedQuantity',minWidth:120},
  {label:'下单时间',key:'createDate',minWidth:180},
  {label:'完成时间',key:'finishDate',minWidth:180},
  {label:'操作',key:'cz',minWidth:140,ctype:'edit',fixed:'right',
    data:[
      {label:'撤单',icon:'Delete'},
    ]
  },
])

let colunm2 = reactive([
  {label:'视频二维码',key:'arcitleUrl',minWidth:180,ctype:'img'},
  {label:'模式说明',key:'patternStr',minWidth:120},
  {label:'模式单价',key:'patternPrice',minWidth:120},
  {label:'下单数量',key:'orderQuantity',minWidth:120},
  {label:'订单总价(积分)',key:'orderPrice',minWidth:200},
  {label:'订单状态',key:'orderState',minWidth:120,ctype:'dict',dict:DdztData},
  {label:'初始数量',key:'originalQuantity',minWidth:120},
  {label:'完成数量',key:'completedQuantity',minWidth:120},
  {label:'下单时间',key:'createDate',minWidth:180},
  {label:'完成时间',key:'finishDate',minWidth:180},
  {label:'操作',key:'cz',minWidth:140,ctype:'edit',fixed:'right',
    data:[
      {label:'撤单',icon:'Delete'},
    ]
  },
])
let colunm3 = reactive([
   {label:'小红书链接',key:'arcitleUrl',minWidth:180,ctype:'edit',data:[
    {label:'复制链接',icon:'CopyDocument',link:true},
    {label:'跳转',icon:'Promotion',link:true},
  ]},
  {label:'模式说明',key:'patternStr',minWidth:120},
  {label:'模式单价',key:'patternPrice',minWidth:120},
  {label:'下单数量',key:'orderQuantity',minWidth:120},
  {label:'订单总价(积分)',key:'orderPrice',minWidth:200},
  {label:'订单状态',key:'orderState',minWidth:120,ctype:'dict',dict:DdztData},
  {label:'初始数量',key:'originalQuantity',minWidth:120},
  {label:'完成数量',key:'completedQuantity',minWidth:120},
  {label:'下单时间',key:'createDate',minWidth:180},
  {label:'完成时间',key:'finishDate',minWidth:180},
  {label:'操作',key:'cz',minWidth:140,ctype:'edit',fixed:'right',
    data:[
      {label:'撤单',icon:'Delete'},
    ]
  },
])
let TabData = reactive([])

// 查询
function getSearch(){
  tabLaoding.value = true
  busi_servic[SearchUrl[activeMenu.value]](search).then(res =>{
    tabLaoding.value = false
    if(res.data.code == 200){
      TabData = res.data.data.records
      total.value = res.data.data.total
    }else{
      ElMessage.warning(res.data.msg)
    }
  })
}

// 分页组件切换
function paginationE(val){
  search.param.page = val.page
  search.param.pageSize = val.limit
  getSearch()
}

// 表格选择的数据
let TabSelData = reactive([])


// 表格点击事件
function editBtnsClick(label,row){
  switch (label) {
    case '撤单':
    delateTable(row)
    break

    case '复制链接':
    copyM(row.arcitleUrl)
    break

    case '跳转':
    toRouter(row.arcitleUrl)
    break
   
  }
}

// 复制链接
function copyM(val){
  navigator.clipboard.writeText(val).then(res =>{
      ElMessage.success('复制成功')
  }).catch(err =>{
      ElMessage.warning('复制失败')
  })
   
}

// 跳转链接
function toRouter(val){
  window.open(val, '_blank')
}

// 删除
function delateTable(row){
  ElMessageBox.confirm(
  '确认撤单?',
  '系统提示',
  {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }
  ).then(() =>{
     const url = DeletUrl[activeMenu.value]
    busi_servic[url]({...TecDataStore.comObj,param:row.id}).then(res =>{
      if(res.data.code == 200){
        ElMessage.success('删除成功!')
        getSearch()
      }else{
        ElMessage.warning(res.data.msg)
      }
  })
  })
}

// 修改
function EditTable(row){
  dialogShow.value = true
  getEditData(row)
}



// 获取回显数据
function getEditData(val){
  for(let i in val){
    if(form[i] || form[i] == 0 || form[i] === false){
      form[i]  = val[i]
    }
  }
}

// 弹窗相关参数
let dialogShow = ref(false)
let dialogTitle = ref('弹窗标题')

// 弹窗里的表单参数
let form = reactive({
  id:null,
  arcitleUrl:null,
  patternId:null,
  orderQuantity:0,
  patternPrice:0,
  all:0,


  authorName:'',
  arcitleTitle:'',

})

  let formList = reactive([])

  let formList1 = reactive([
  {label:'文章链接地址:',key:'arcitleUrl',type:'input',placeholder:"",sp:24,re:true,lw:'118'},
  {label:'模式:',key:'patternId',type:'radio',data:[],placeholder:"",sp:24,re:true,lw:'118',isid:true},
  {label:'单价:',key:'patternPrice',type:'span',placeholder:"",sp:24,lw:'118'},
  {label:'下单数量:',key:'orderQuantity',type:'numInput',placeholder:"",sp:24,re:true,lw:'118'},
  {label:'总计花费:',key:'all',type:'span',placeholder:"",sp:24,lw:'118'},

])

  let formList2 = reactive([
  {label:'博主名称:',key:'authorName',type:'input',placeholder:"",sp:24,re:true,lw:'118'},
  {label:'视频号标题:',key:'arcitleTitle',type:'input',placeholder:"",sp:24,re:true,lw:'118'},
  {label:'视频二维码:',key:'arcitleUrl',type:'uploadImg',placeholder:"",sp:12,lw:'118'},

  {label:'模式:',key:'patternId',type:'radio',data:[],placeholder:"",sp:24,re:true,lw:'118',isid:true},
  {label:'单价:',key:'patternPrice',type:'span',placeholder:"",sp:24,lw:'118'},
  {label:'下单数量:',key:'orderQuantity',type:'numInput',placeholder:"",sp:24,re:true,lw:'118'},
  {label:'总计花费:',key:'all',type:'span',placeholder:"",sp:24,lw:'118'},
])

  let formList3 = reactive([
  {label:'小红书链接地址:',key:'arcitleUrl',type:'input',placeholder:"",sp:24,re:true,lw:'148'},
  {label:'模式:',key:'patternId',type:'radio',data:[],placeholder:"",sp:24,re:true,lw:'118',isid:true},
  {label:'单价:',key:'patternPrice',type:'span',placeholder:"",sp:24,lw:'118'},
  {label:'下单数量:',key:'orderQuantity',type:'numInput',placeholder:"",sp:24,re:true,lw:'118'},
  {label:'总计花费:',key:'all',type:'span',placeholder:"",sp:24,lw:'118'},

])


  function changeForm(key,value){
    if(key == 'patternId'){
      let index = dataC.findIndex(i => i.id == value)
      form.patternPrice = dataC[index]['patternPrice']
    }
    computetMoney()
  }


  function computetMoney(){
    form.all = Number(form.orderQuantity) * Number(form.patternPrice)
    
  }



  
const refform = ref(null)
let formloading = ref(false)
let imgsrc = ref(null)

// 弹窗提交
function submit(){
  refform.value.soform.validate((vali) =>{
    if(!vali){
      ElMessage.warning('请将表单填写完整!')
    }else{
      let parmas = {
        param:{
          ...JSON.parse(JSON.stringify(form)),
        }
      }
     const url = addUrl[activeMenu.value]
      formloading.value = true
      busi_servic[url](parmas).then(res =>{
        formloading.value = false
        if(res.data.code == 200){
          ElMessage.success(res.data.msg)
          dialogShow.value = false
          getSearch()
        }else{
          ElMessage.warning(res.data.msg)
        }
    })
    
    }
  })
}

// 弹窗关闭
function dialogClose(){
  // 清理表单缓存
  refform.value.soform.resetFields()
  dialogShow.value = false
  for(let i in form){
    form[i] = null
  }
  form.state = 1
}


 function fileUpload(file,fileList,index){
  getBase64(file.raw).then(resBase64 => {
      form.arcitleUrl = "data:" + file.raw.type + ";base64," + resBase64.split(',')[1]
    })
 }


 function getBase64(file){
   return new Promise((resolve, reject) => {
    let reader = new FileReader
    let fileResult = ""
    reader.readAsDataURL(file)
        // 开始转
    reader.onload = function() {
      fileResult = reader.result
    }
      // 转失败
    reader.onerror = function(error) {
    reject(error)
    }
    // 结束，返回值
    reader.onloadend = function() {
      resolve(fileResult)
    }
  })
 }



</script>
<style scoped lang="scss">
  :deep(.el-radio-group){
    display: flex;
    flex-direction: column;
    align-items: baseline;
  }
</style>
